<template>
    <div :class="['swiper-container',className,case]">
        <div class="swiper-wrapper">
        	<slot></slot>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination ruler"></div>
    </div>
</template>

<style  lang='sass'>
	@import '../../public/plugins/swiper/css/swiper.min.css';
	@import "../../public/css/common.scss";
	body {
    }
    .ruler{
    	font-size: 1rem!important;
    }
    .swiper-slide:not(.individual-swiper-slide) {
        text-align: center;
        font-size: 18px;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .individual-swiper-slide{
		transition: all 0.5s;
	}
    .case3 .swiper-slide {
		visibility: hidden;
    }
    .case3 .swiper-slide.swiper-slide-active,
    .swiper-slide.swiper-slide-prev,
    .swiper-slide.swiper-slide-next{
    	visibility: inherit;
    }
    .case3.swiper-slide.swiper-slide-next{
    	z-index: 1;
    }
    /* .case3{
    	    overflow: initial;
    	} */
	.case3 .swiper-slide-active{
		z-index: 2;
		top: -1rem;
	}
	/* case5 */
	.case5 .swiper-slide{
		border-radius:5px;
	}
	/* case6 */
	.case6.swiper-container{
		overflow: initial;
	}
	.case6 .swiper-slide{
		border-radius:5px;
	}
	.case6 .swiper-slide{
		background: transparent;
	}

</style>

<script>
let Swiper = require('swiper');
export default {
	props: {
		slidePreview:{
			type:Number,
			default:4
		},
		dataType:{
			type:String,
			default:'1'
		},
		dataName:{
			type:String,
		},
		dataSlideIndex:{
			type:Number,
			default:0
		},
		dataAuto:{
			type:Boolean,
			default:true
		},
		dataCenter: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			type : this.dataType,
			className: this.dataName,
			swiper:null,
			case:'case'+this.dataType
		}
	},
	methods: {
		update:function(force){
			//this.swiper.destroy();
			this.swiper.update(force);
		},
		destroy(){
			this.swiper.destroy(true);
		},
		changeSwiper:function(swiper){
				let dataName = this.dataName;
				    //bindData=swiper.slides.filter('.swiper-slide-active').data();

				this.dataSlideIndex=swiper.activeIndex||0;

				this.$dispatch('change-swiper',{swiper,dataName});
		},
		init:function() {
			let type = this.$get('type'),
				Options = {};
			let defaultOptions={
				onTransitionEnd:(swiper)=>{
					this.changeSwiper(swiper);
				},
				initialSlide:this.dataSlideIndex
			}
			switch(type){
				case '0':
					Options = {
				        paginationClickable: true,
				        slidesPerView: 1,
				        loop: true
					};
					break;
				case '1':
					Options = {
						/*设置slider容器能够同时显示的slides数量(carousel模式)。
						可以设置为number或者 'auto'则自动根据slides的宽度来设定数量。
						loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。*/
				        slidesPerView: 2,//
				        //centeredSlides: true,//设定为true时，活动块会居中，而不是默认状态下的居左。
				        paginationClickable: true,
				        spaceBetween: 10,
				        loop:true
					};
					break;
				case '2':
					Options = {
						//pagination: '.swiper-pagination',
				        effect: 'coverflow',
				        grabCursor: true,
				        centeredSlides: true,
				        slidesPerView: 3,
				        loop:true,
				        coverflow: {
				            rotate: 50,
				            stretch: 0,
				            depth: 100,
				            modifier: 1,
				            slideShadows : true
				        }
					};
					break;
				case '3':
					Options = {
				        slidesPerView: 4,//
				        centeredSlides: true,//设定为true时，活动块会居中，而不是默认状态下的居左。
				        paginationClickable: true,
				        spaceBetween: 10,
				        speed:600
					};
					break;
				case '4':
					Options = {
						//pagination: '.swiper-pagination',
				        centeredSlides: true,
				        slidesPerView: 3,
				        loop:true,
				        paginationClickable: true,
       					spaceBetween: 0
					};
					break;
				//model_selector page:car class swiper
				case '5':
					Options = {
				        effect: 'coverflow',
				        grabCursor: true,
				        centeredSlides: true,
				        slidesPerView: 1.8,
				        initialSlide: 0,
				        //loop:true,
				        speed:600,
				        coverflow: {
				            rotate: 0,
				            //stretch: ($('.ruler').css('fontSize').replace('px','')*5 || 100),
				            stretch: 0,
				            depth: 400,
				            modifier: 1,
				            slideShadows : false,
				        }
					};
					break;
				case '6':
					Options = {
				        effect: 'coverflow',
				        grabCursor: true,
				        centeredSlides: true,
				        slidesPerView: 3,
				        initialSlide: 0,
				        loop:true,
				        speed:600,
				        coverflow: {
				            rotate: 0,
				            stretch: -40,
				            depth: 200,
				            modifier: 1,
				            slideShadows : false
				        }
					};
					break;
					//用于model_selector的carlist
				case '7':
					Options = {
				        effect: 'coverflow',
				        grabCursor: true,
				        centeredSlides: this.dataCenter,
				        slidesPerView: 'auto',
				        //loop:true,
				        speed:600,
				        coverflow: {
				            rotate: 0,
				            stretch: 0,
				            depth: 0,
				            modifier: 1,
				            slideShadows : false
				        },
				        //pagination : '.swiper-pagination',
						//paginationClickable :true
					};
					break;
				//用于model_finder
				case '8':
					Options = {
						direction: 'vertical',
				        grabCursor: true,
				        centeredSlides: this.dataCenter,
				        slidesPerView: 'auto',
				        //loop:true,
				        speed:600,
				        //pagination : '.swiper-pagination',
						//paginationClickable :true
					};
					break;
				//用于router_views_demo
				case '9':
					Options = {
						effect: 'coverflow',
				        grabCursor: true,
				        centeredSlides: false,
				        slidesPerView: 1.4,
				        initialSlide: 0,
				        speed:600,
				        coverflow: {
				            rotate: 0,
				            stretch: 0,
				            depth: 100,
				            modifier: 1,
				            slideShadows : true
				        }
					}
					break;
			}
		    let swiper = new Swiper('.'+ this.dataName,_.extend(Options,defaultOptions));
		    //给swiper绑定点击事件
		    if (type == '7' || type == 7) {
		    	swiper.on('click',function(swiper){
		    		let index = swiper.clickedIndex;
		    		swiper.slideTo(index, 500, false)
		    	});
		    }
		    this.$set('swiper', swiper);
		}
	},
	ready() {
		let self = this;
		if (self.dataAuto) {
			self.init();
		}
	}
}
</script>
